<template>
  <div>
    <div v-loading="pageLoading">
      <modTrainInfo ref="refModTrainInfo" :custom-setting-title="trainInfo.setting ? trainInfo.setting.customSettingTitle : ''" :register-train-info="registerTrainInfo" />
    </div>

    <el-row>
      <el-col class="step_btn" :span="24" align="center">
        <el-button @click="onPrevStep">上一步</el-button>
        <el-button :loading="nextLoading" type="primary" @click="getFormData">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import modTrainInfo from '../components/modTrainInfo';

import {
  api_GET_TrainTrainningRegisterBySourceRegister, // 根据培训Id和会员Id获取培训人员详情
  api_POST_TrainTrainningRegisterOrUpdate // 创建或更新培训人员特有信息
} from '@/extend/api/trainswaggerApi/app.js';

export default {
  components: {
    modTrainInfo
  },
  props: {
    // 传入的个人信息数据
    userData: {
      type: Object,
      default() {
        return {};
      }
    },
    // 传入的个人信息数据
    trainInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    requiredIdData: {
      type: Object,
      default() {
        return {};
      }
    },
    dict: {
      type: Object,
      default() {
        return {};
      }
    },
    isShow: {
      type: Boolean(),
      default: false
    }
  },
  data () {
    return {
      pageLoading: true,
      nextLoading: false,
      registerTrainInfo: {}
    };
  },
  watch: {
    isShow: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getRegisterTrainInfo({
            trainningId: this.trainInfo.id,
            registerId: this.requiredIdData.registerId
          });
        }
      }
    }
  },
  methods: {
    // 获取培训用户特有信息
    getRegisterTrainInfo (qo) {
      this.pageLoading = true;
      api_GET_TrainTrainningRegisterBySourceRegister(qo)
        .then(
          res => {
            this.pageLoading = false;
            if (res.customFields && res.customFields.length) {
              res.customFields.sort((a, b) => a.sortOrder - b.sortOrder);
            }
            this.registerTrainInfo = res;
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.$message({
              message: `培训信息获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 获取组件内的数据
    getFormData () {
      this.$refs.refModTrainInfo.getInsideUserData()
        .then(
          res => {
            this.pageLoading = true;
            this.nextLoading = true;
            const _res = JSON.parse(JSON.stringify(res));
            if (_res.customFields && _res.customFields.length) {
              _res.customFields = _res.customFields.map(item => {
                if (!item.value) {
                  throw new Error();
                }
                return {
                  trainningCustomSettingFieldId: item.trainningCustomSettingFieldId,
                  value: item.value
                };
              });
            }
            _res.registerId = this.requiredIdData.registerId;
            this.$emit('onSetTransferData', 'isOrganizationRegistered', _res.isOrganizationRegistered);
            this.updateRegisterTrainInfoAPI(_res);
          }
        )
        .catch(
          error => {
            console.log('error: ', error);
            this.pageLoading = false;
            this.nextLoading = false;
            this.$message({
              message: `请先完善必填信息`,
              type: 'warning',
              showClose: true
            });
          }
        );
    },
    updateRegisterTrainInfoAPI (vo) {
      api_POST_TrainTrainningRegisterOrUpdate(vo)
        .then(
          res => {
            console.log('res: ', res);
            this.pageLoading = false;
            this.nextLoading = false;
            this.onNextStep();
          }
        )
        .catch(
          error => {
            console.log('error: ', error);
            this.pageLoading = false;
            this.nextLoading = false;
            this.$message({
              type: 'error',
              showClose: true,
              message: `修改失败 ${error.error.message}`
            });
          }
        );
    },
    onPrevStep () {
      this.$emit('onPrevStep');
    },
    onNextStep () {
      this.$emit('onNextStep');
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
